<template>
  <main>
    <div class="login">
      <h1>登录页面</h1>
      <hr>
      <!-- <input type="text" placeholder="管理员账户..." v-model="adminname"><br>
      <input type="password" placeholder="密码..." v-model="password"><br>
      <button @click="onLoginFn()">登录</button>
      <hr> -->
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户名" prop="adminname">
          <el-input v-model="ruleForm.adminname" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </main>
</template>


<!-- <script setup lang="ts">
import { LoginRequest } from '@/api/LoginRequest';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const adminname = ref('')
const password = ref('')

function onLoginFn() {
  LoginRequest(adminname.value, password.value).then(r => {
    localStorage.setItem('token', r.data.data.token)
    router.push('/home')
  }).catch(() => {
    alert("登录失败，请重新登录！！！")
    adminname.value = ''
    password.value = ''
  })
}



</script> -->

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { LoginRequest } from '@/api/LoginRequest';
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
const router = useRouter()

interface RuleForm {
  adminname: string
  password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  adminname: '',
  password: '',
})
// const locationOptions = ['Home', 'Company', 'School']
const rules = reactive<FormRules<RuleForm>>({
  adminname: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { pattern: /^.{3,32}$/, message: 'Length should be 3 to 32', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    { pattern: /^.{3,32}$/, message: 'Length should be 3 to 32', trigger: 'blur' },
  ],
  // resource: [
  //   {
  //     required: true,
  //     message: 'Please select activity resource',
  //     trigger: 'change',
  //   },
  // ],
  // desc: [
  //   { required: true, message: 'Please input activity form', trigger: 'blur' },
  // ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      LoginRequest(ruleForm.adminname, ruleForm.password).then(r => {
        localStorage.setItem('token', r.data.data.token)
        console.log(r.data.data.adminname);
        console.log(r.data.data.adminid);
        store.addid(r.data.data.adminid);
        store.addname(r.data.data.adminname);
        router.push('/home')
      }).catch(() => {
        alert("登录失败，请重新登录！！！")
        ruleForm.adminname = ''
        ruleForm.password = ''
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = () => {
  ruleForm.adminname = ''
  ruleForm.password = ''
}

// const options = Array.from({ length: 10000 }).map((_, idx) => ({
//   value: `${idx + 1}`,
//   label: `${idx + 1}`,
// }))
</script>
<style scoped lang="scss">
main {
  height: 100vh;
  background-image: url('../assets/image/bg.jpg');
  display: flex;
  justify-content: center;
  align-items: center;

  .login {
    width: 350px;
    height: 300px;
    background-color: rgb(242, 242, 242);
    padding: 10px 20px;
    border-radius: 20px;
  }
}
</style>
